CSS Codes

---===Image Rollover Effect===---

Here are the shortcode character sequences
.. = Zoom in & saturate
.: = Zoom out & desaturate
.+ = Blur
./ = Greyscale to full colour
-- = Full colour to Greyscale
.- = Slide left
-. = Slide Right
-+ = Slide Down
++ = Slide Up

---===And here's the CSS code===---

// Zoom in and saturate
img[alt*=".."] 
{
   -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
 // opacity: 0.7 !important;
  filter: grayscale(.35);
    -webkit-filter: grayscale(35%);
  -moz-filter: grayscale(.35);
  -o-filter: grayscale(.35);
  -ms-filter: grayscale(.35);

  
}

img[alt*=".."]:hover{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform:    scale(1.2);
  -ms-transform:     scale(1.2);
  -o-transform:      scale(1.2);
  transform:         scale(1.2);
  //opacity: 1 !important;
   filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  
}


// Zoom out and desaturate
img[alt*=".:"] 
{
   -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
 // opacity: 0.7 !important;
transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform:    scale(1.2);
  -ms-transform:     scale(1.2);
  -o-transform:      scale(1.2);
  transform:         scale(1.2);
  
 filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  

  
}

img[alt*=".:"]:hover{
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform:    scale(1);
  -ms-transform:     scale(1);
  -o-transform:      scale(1);
  transform:         scale(1);
  //opacity: 1 !important;
   filter: grayscale(.35);
    -webkit-filter: grayscale(35%);
  -moz-filter: grayscale(.35);
  -o-filter: grayscale(.35);
  -ms-filter: grayscale(.35);
  
  
}

// Slide 
img[alt*=".-"] 
{
 margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

img[alt*=".-"]:hover{
   margin-left: -200px;
}


// Slide right
img[alt*="-."] 
{
 margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

img[alt*="-."]:hover{
   margin-left: 200px;
}

// Slide down
img[alt*="-+"] 
{
 margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

img[alt*="-+"]:hover{
   margin-top: 200px;
}

// Slide Up
img[alt*="++"] 
{
 margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

img[alt*="++"]:hover{
   margin-top: -200px;
}


// Blur
img[alt*=".+"] 
{

  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
       -o-transition: all .5s ease;
      -ms-transition: all .5s ease;
          transition: all .5s ease;
}

img[alt*=".+"]:hover{
   filter: blur(5px);
      -webkit-filter:blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
 
}

// Grey to colour
img[alt*="./"] 
{
   filter: grayscale(100);
      -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100);
  -o-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

img[alt*="./"]:hover{
   filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
 
}

// Colour to greyscale
img[alt*=".\"] 
{
   filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

img[alt*=".\"]:hover{
   filter: grayscale(1000);
      -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100);
  -o-filter: grayscale(100);
  -ms-filter: grayscale(100);
 
}

------------------------------------------------------
------------------------------------------------------



<button class="c-button c-button--purple" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Material Design Ripple Effect
</button>

<hr class="o-divider">

<button class="c-button c-button--blue" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Short Button
</button>

<hr class="o-divider">

<button class="c-button c-button--red" type="button">
  <div class="c-ripple js-ripple">
    <span class="c-ripple__circle"></span>
  </div>
  Long Button to Stress-Test Ripple Animation
</button>

